<template>
	<view class="content" style="position: relative;">
		 
		<view style="display: flex;justify-content: center;position: fixed;width: 100%;bottom: 12px;">
			<view v-if="imgUrl" @click="storeShowAddress=true" :style="buttonStyle">
				打开图片
			</view>
			<view v-else @click="confirm" :style="buttonStyle">
				生成图片
			</view>
			<view v-if="imgUrl" @click="confirm" :style="buttonStyle1">
				重新生成
			</view>
		</view>
		
		<u-tabs
		    :list="list1"
		    lineWidth="20"
		    lineHeight="7"
		    :lineColor="`url(${lineBg}) 100% 100%`"
		    :activeStyle="{
		        color: '#303133',
		        fontWeight: 'bold',
		        transform: 'scale(1.05)'
		    }"
		    :inactiveStyle="{
		        color: '#606266',
		        transform: 'scale(1)'
		    }"
		    itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
		    >
		    </u-tabs>
		
		<view class="_textarea" :style="{'--main-bg-color':themeColor.main_color}">
			<u--textarea border="none" v-model="content" maxlength="400" placeholder="描述你想画什么,包括画面里面都有什么内容." count ></u--textarea>
		</view>
		
		<view class="fenggeStyle">
			<view style="font-weight: 700;">风格选择</view>
		
			<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
				<view @click="selectType(item,index)"  class="scroll-item" v-for="(item,index) in fenggeList">
					<view class="label">
						<image :style="fenggeIndex == index?'box-shadow: 1px 1px 4px 1px rgba(166, 166, 166, 0.4);background-color:rgba(176, 32, 29, 0.1);border:1px solid #f3f3f3':''" style="height: 108rpx;width: 108rpx;border-radius: 12rpx;" :src="item.image" mode="aspectFill"></image>
						<view :style="fenggeIndex == index?'color:'+themeColor.main_color+';font-weight:700':'color:#474747'">{{item.title}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="fenggeStyle">
			<view style="font-weight: 700;">风格包含</view>
			<view class="scroll-view_H1">
				<view @click="selectType1(item,index)"  class="scroll-item" v-for="(item,index) in fenggeList[0].children">
					<view class="label">
						<image :style="fenggeIndex1 == index?'border:2px solid #f30404':''" style="height: 128rpx;width: 128rpx;border-radius: 12rpx;" :src="item.image" mode="aspectFill"></image>
						<view :style="fenggeIndex1 == index?'color:'+themeColor.main_color+';font-weight:700':'color:#474747'">{{item.title}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="fenggeStyle">
			<view style="font-weight: 700;">画面比例</view>
			<view class="scroll-view_H1">
				<view @click="selectType2(item,index)"  class="scroll-item" v-for="(item,index) in chima">
					<view class="label">
						<view :style="fenggeIndex2 == index?'border:2px solid #f30404':''" style="height: 148rpx;width: 148rpx;border-radius: 12rpx;display: flex;justify-content: center;align-items: center;">
							<view v-if="item.title == '512x512'" :style="[biliStyle]"></view>
							<view v-if="item.title == '640x360'" :style="'width: 64rpx;height: 36rpx;background:'+themeColor.main_color"></view>
							<view v-if="item.title == '640x480'" :style="'width: 64rpx;height: 48rpx;background:'+themeColor.main_color"></view>
							<view v-if="item.title == '640x640'" :style="'width: 64rpx;height: 64rpx;background:'+themeColor.main_color"></view>
							<view v-if="item.title == '680x512'" :style="'width: 68rpx;height: 51.2rpx;background:'+themeColor.main_color"></view>
							<view v-if="item.title == '512x680'" :style="'width: 51.2rpx;height: 68rpx;background:'+themeColor.main_color"></view>
							<view v-if="item.title == '768x768'" :style="'width: 76.8rpx;height: 76.8rpx;background:'+themeColor.main_color"></view>
							<view v-if="item.title == '720x1280'" :style="'width: 72rpx;height: 128.0rpx;background:'+themeColor.main_color"></view>
							<view v-if="item.title == '1280x720'" :style="'width: 128.0rpx;height: 72rpx;background:'+themeColor.main_color"></view>
							<view v-if="item.title == '1024x1024'" :style="'width: 102.4rpx;height: 102.4rpx;background:'+themeColor.main_color"></view>
						</view>
						<!-- <image  :src="item.image" mode="aspectFill"></image> -->
						<view :style="fenggeIndex2 == index?'color:'+themeColor.main_color+';font-weight:700':'color:#474747'">{{item.title}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<view style="height: 80px;">
			
		</view>
		
		
		<u-popup round="8" :show="storeShowAddress" mode="bottom"  @close="closeAddress" >
			<view class="popupBg">
				<view class="cs-img">
					<image :src="imgUrl" mode="widthFix"/>
				</view>
				 <view  @click="saveImg(imgUrl)" :style="buttonStyle" style="margin-top: 24rpx;">
				 	保存图片
				 </view>
			</view>
		</u-popup>
		
		<nuoyu-fudon :sharePacket="sharePacket" 
		 :showAnimate="showAnimate"></nuoyu-fudon>
	<!-- 	<view class="cs-img">
			<image :src="imgUrl" />
			<u-button @click="saveImg(imgUrl)" type="primary" text="保存图片"></u-button>
		</view>
		<view class="ai-img" v-if="imgList.length !== 0">
			 <u-image
			    :src="getFullImageUrl(imgList)"
			    :style="{ height: 'auto', objectFit: 'contain' }"
			  ></u-image>
		</view> -->
	</view>
</template>

<script>

import store from "@/store/index.js"
export default{
	data(){
		return{
			showAnimate: true,
			sharePacket: {
				isState: true, //默认不显示
			}, //分销商详细
			storeShowAddress:false,
			fenggeIndex:0,
			fenggeIndex1:0,
			fenggeIndex2:0,
			chima:[
				{
					title:'512x512',
					image:'https://xiangyou-1313406647.cos.ap-nanjing.myqcloud.com/AI_PICTURE/AI_1741252764.pn'
				},
				{
					title:'640x360',
					image:'https://xiangyou-1313406647.cos.ap-nanjing.myqcloud.com/AI_PICTURE/AI_1741252764.pn'
				},
				{
					title:'640x480',
					image:'https://xiangyou-1313406647.cos.ap-nanjing.myqcloud.com/AI_PICTURE/AI_1741252764.pn'
				},
				{
					title:'640x640',
					image:'https://xiangyou-1313406647.cos.ap-nanjing.myqcloud.com/AI_PICTURE/AI_1741252764.pn'
				},
				{
					title:'680x512',
					image:'https://xiangyou-1313406647.cos.ap-nanjing.myqcloud.com/AI_PICTURE/AI_1741252764.pn'
				},
				{
					title:'512x680',
					image:'https://xiangyou-1313406647.cos.ap-nanjing.myqcloud.com/AI_PICTURE/AI_1741252764.pn'
				},
				{
					title:'768x768',
					image:'https://xiangyou-1313406647.cos.ap-nanjing.myqcloud.com/AI_PICTURE/AI_1741252764.pn'
				},
				{
					title:'720x1280',
					image:'https://xiangyou-1313406647.cos.ap-nanjing.myqcloud.com/AI_PICTURE/AI_1741252764.pn'
				},
				{
					title:'1280x720',
					image:'https://xiangyou-1313406647.cos.ap-nanjing.myqcloud.com/AI_PICTURE/AI_1741252764.pn'
				},
				{
					title:'1024x1024',
					image:'https://xiangyou-1313406647.cos.ap-nanjing.myqcloud.com/AI_PICTURE/AI_1741252764.pn'
				},
			],
			fenggeList:[
				{
					title:'热门推荐',
					image:'https://xiangyou-1313406647.cos.ap-nanjing.myqcloud.com/AI_PICTURE/AI_1741252764.png',
					children:[
						{
							title:'国风',
							image:'https://xiangyou-1313406647.cos.ap-nanjing.myqcloud.com/AI_PICTURE/AI_1741252764.png'
						},
						{
							title:'彩色水墨',
							image:'https://xiangyou-1313406647.cos.ap-nanjing.myqcloud.com/AI_PICTURE/AI_1741252764.png'
						},
						{
							title:'留白水墨',
							image:'https://xiangyou-1313406647.cos.ap-nanjing.myqcloud.com/AI_PICTURE/AI_1741252764.png'
						},
						{
							title:'三国风',
							image:'https://xiangyou-1313406647.cos.ap-nanjing.myqcloud.com/AI_PICTURE/AI_1741252764.png'
						},
						{
							title:'国风插图',
							image:'https://xiangyou-1313406647.cos.ap-nanjing.myqcloud.com/AI_PICTURE/AI_1741252764.png'
						},
						{
							title:'机器人',
							image:'https://xiangyou-1313406647.cos.ap-nanjing.myqcloud.com/AI_PICTURE/AI_1741252764.png'
						},
						{
							title:'艺术强化',
							image:'https://xiangyou-1313406647.cos.ap-nanjing.myqcloud.com/AI_PICTURE/AI_1741252764.png'
						},
						{
							title:'3D模型',
							image:'https://xiangyou-1313406647.cos.ap-nanjing.myqcloud.com/AI_PICTURE/AI_1741252764.png'
						},
						{
							title:'油画',
							image:'https://xiangyou-1313406647.cos.ap-nanjing.myqcloud.com/AI_PICTURE/AI_1741252764.png'
						},
						{
							title:'赛博朋克',
							image:'https://xiangyou-1313406647.cos.ap-nanjing.myqcloud.com/AI_PICTURE/AI_1741252764.png'
						}
						
					]
				},
				{
					title:'测试',
					image:'https://xiangyou-1313406647.cos.ap-nanjing.myqcloud.com/AI_PICTURE/AI_1741252764.png',
					 
				},{
					title:'测试',
					image:'https://xiangyou-1313406647.cos.ap-nanjing.myqcloud.com/AI_PICTURE/AI_1741252764.png',
					 
				},{
					title:'测试',
					image:'https://xiangyou-1313406647.cos.ap-nanjing.myqcloud.com/AI_PICTURE/AI_1741252764.png',
					 
				},
			],
			lineBg:'',
			list1: [{
				name: 'AI绘图',
			}, {
				name: '推荐',
			}, {
				name: '电影'
			}, {
				name: '科技'
			}, {
				name: '音乐'
			}, {
				name: '美食'
			}, {
				name: '文化'
			}, {
				name: '财经'
			}, {
				name: '手工'
			}],
			content:'',
			themeColor:'',
			wechatConfig:'',
			userInfo:'',
			money:0,
			imgList:[],
			imgUrl:''
		}
	},
	onLoad() {
		this.themeColor = this.$store.state.themeConfig || uni.getStorageSync('themeConfig')
		this.wechatConfig = this.$store.state.wechatConfig ||  uni.getStorageSync('wechatConfig')
		// this.getAiData();
		this.userInfo = uni.getStorageSync('userInfo');
	},
	computed:{
		biliStyle(){
			const data = {}
			data['width']='51.2rpx'
			data['height']='51.2rpx'
			data['background']=this.themeColor.main_color
			return data
		},
		buttonStyle(){
			const data = {}
			data['width']='90%'
			data['height']='80rpx'
			data.background=this.themeColor.main_color
			data.color = 'white'
			data.display = 'flex'
			data.justifyContent = 'center'
			data.textAlign = 'center'
			data.alignItems = 'center'
			data.borderRadius = '32rpx'
			return data
		},
		buttonStyle1(){
			const data = {}
			data['width']='90%'
			data['height']='80rpx'
			data.background= '#991210'
			data.color = 'white'
			data.display = 'flex'
			data.justifyContent = 'center'
			data.textAlign = 'center'
			data.alignItems = 'center'
			data.borderRadius = '32rpx'
			return data
		}
	},
	methods:{
		closeAddress(){
			this.storeShowAddress = false
		},
		selectType(item,index){
			this.fenggeIndex = index
		},
		selectType1(item,index){
			this.fenggeIndex1 = index
		},
		selectType2(item,index){
			this.fenggeIndex2 = index
		},
		 click(item) {
			 console.log('item', item);
		 },
		getFullImageUrl(path){
			return `${this.wechatConfig.tencent‌Domain}${path}`
		},
		confirm(e){
			this.tui.request("/basic-capi/searchPicture/search","post",{
				content:this.content,
				type:'2',
				pictureType:'图片风格:'+this.fenggeList[0].children[this.fenggeIndex1].title+'。',
				nickName:uni.getStorageSync('userInfo').nickName,
				head_img:uni.getStorageSync('userInfo').head_img,
				phone:uni.getStorageSync('userInfo').phone,
				chima:this.chima[this.fenggeIndex2].title
			}).then((res)=>{
				if(res.code===200){
					this.imgUrl = this.wechatConfig.tencent‌Domain + res.data.list
				}
			})
		},
		saveImg(imgUrl) {
		    const uniPlatform = uni.getSystemInfoSync().uniPlatform;
		   
		    if (uniPlatform === 'web') {
		        this.downloadImgH5(imgUrl);
		    } else if (uniPlatform === 'mp-weixin') {
		        this.saveImgMiniProgram(imgUrl);
		    } else {
		        console.error('未知平台:', uniPlatform);
		    }
		},
		downloadImgH5(imgUrl) {
		    console.log('H5 下载图片:', imgUrl);
		    fetch(imgUrl)
		        .then(response => response.blob())
		        .then(blob => {
		            const link = document.createElement('a');
		            link.href = URL.createObjectURL(blob);
		            link.download = 'image.jpg'; 
		            document.body.appendChild(link);
		            link.click();
		            document.body.removeChild(link);
		        })
		        .catch(error => {
		            console.error('下载失败:', error);
		        });
		},
		saveImgMiniProgram(imgUrl) {
		    console.log('小程序下载图片:', imgUrl);
		    uni.downloadFile({
		        url: imgUrl,
		        success: (res) => {
		            if (res.statusCode === 200) {
		                uni.saveImageToPhotosAlbum({
		                    filePath: res.tempFilePath,
		                    success: () => {
		                        uni.showToast({ title: '保存成功' });
		                    },
		                    fail: (err) => {
		                        console.error('保存失败:', err);
		                        uni.showToast({ title: '保存失败', icon: 'none' });
		                    }
		                });
		            } else {
		                console.error('下载失败，状态码:', res.statusCode);
		                uni.showToast({ title: '下载失败', icon: 'none' });
		            }
		        },
		        fail: (err) => {
		            console.error('下载失败:', err);
		            uni.showToast({ title: '下载失败', icon: 'none' });
		        }
		    });
		}
	}
}
</script>

<style lang="scss" scoped>
.ai-img{
		display: flex;
		justify-content: center;
	 }
	 ._textarea{
		margin: 20rpx;
		padding: 6rpx;
		border: 1px solid var(--main-bg-color);
		border-radius: 8rpx;
	 }
	 .fenggeStyle{
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		gap: 12rpx;
		.label{
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: 6rpx;
			text-align: center;
		}
		 
	 }
	 .scroll-view_H {
		white-space: nowrap;
		display: flex;
		width: 100%;
		.scroll-item{
			display: inline-block;
			padding: 0rpx 26rpx 16rpx 0rpx;
			border-radius: 8rpx;
		}
	}
	.scroll-Y {
		height: 300rpx;
	}
	 
	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}
	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}
	.scroll-view_H1{
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		.scroll-item{
			 
			padding: 6rpx 16rpx;
			border-radius: 8rpx;
		}
	}
	.popupBg{
	  height: 600rpx;
	  padding: 20rpx;
	  overflow-y: auto;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	}
	.cs-img{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 400rpx;
		width: 400rpx;
	}
</style>